<!--历史数据-->
<template>
  <div class="ele-body">
    <!-- 搜索表单 -->
    <div class="block-interval">
      <a-card :bordered="false">
        <a-form layout="inline" :model="where">
          <a-row>
            <a-form-item label="对比时间1:">
              <a-date-picker v-model:value="where.oneDate" type="date" show-time format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
            </a-form-item>
            <a-form-item label="对比时间2:">
              <a-date-picker v-model:value="where.twoDate" type="date" show-time format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
            </a-form-item>
            <a-form-item class="ele-text-center">
              <a-space>
                <a-button type="primary" @click="reload">对比</a-button>
                <a-button @click="reset">重置</a-button>
              </a-space>
            </a-form-item>

          </a-row>
        </a-form>
      </a-card>

      <a-card
        :bordered="false"
        title="饮水量实时数据对比"
        :body-style="{padding: '16px 6px 0 0'}">
        <v-chart
          ref="useWaterChart"
          style="height: 362px;"
          :option="useWaterChartOption"/>
      </a-card>

      <a-card
        :bordered="false"
        title="空气温度实时数据对比"
        :body-style="{padding: '16px 6px 0 0'}">
        <v-chart
          ref="envTemplateChart"
          style="height: 362px;"
          :option="envTemplateChartOption"/>
      </a-card>

      <a-card
        :bordered="false"
        title="进出水温度实时数据对比"
        :body-style="{padding: '16px 6px 0 0'}">
        <v-chart
          ref="templateChart"
          style="height: 362px;"
          :option="templateChartOption"/>
      </a-card>
    </div>

  </div>
</template>

<script>
import { provide } from 'vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart, BarChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import 'echarts-wordcloud';
import { ChartTheme } from 'ele-admin-pro';
import moment from 'moment';
import { message } from 'ant-design-vue';
import {DeviceDrinkheatingDataApi} from "@/api/property/drinkhearting/DeviceDrinkheatingDataApi";


use([
  CanvasRenderer,
  LineChart,
  BarChart,
  GridComponent,
  TooltipComponent,
  LegendComponent
]);
provide(THEME_KEY, ChartTheme);

export default {
  name: 'DeviceDrinkheartingDataDiff',
  components: {
    VChart
  },
  props: {
    data: Object
  },
  async mounted() {
    this.getUseWaterData();
  },
  data() {
    return {
      // 表格搜索条件
      where: {"recordId" : this.data.recordId},
      envTemperatureData: {
        "yesterday" : [],
        "today" : [],
        "serialNameYesterday" : "昨日空气温度℃",
        "serialNameToday" : "今日空气温度℃",
      },
      temperatureData: {
        "yesterdayInfluent" : [],
        "todayInfluent" : [],
        "yesterdayEffluent" : [],
        "todayEffluent" : [],

        "serialNameYesterdayInfluent" : "昨日进水温度℃",
        "serialNameTodayInfluent" : "今日进水温度℃",
        "serialNameYesterdayEffluent" : "昨日出水温度℃",
        "serialNameTodayEffluent" : "今日出水温度℃",
      },
      useWaterData : {
        "yesterday" : [],
        "today" : [],
        "serialNameYesterday" : "昨日饮水量m³",
        "serialNameToday" : "今日饮水量m³",
      }
    }
  },
  computed: {
    useWaterChartOption() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          backgroundColor: "rgba(33,47,71,0.8)",
          padding: [10, 16],
          textStyle: {
            color: "#A7C8ED",
            lineHeight: 28,
          },
          formatter: function(params) {
            console.log(params);
          },
          extraCssText: "width: 230px",
        },
        legend: {
          data: [this.useWaterData.serialNameYesterday, this.useWaterData.serialNameToday],
          right: 20
        },
        xAxis: {
          type: 'time',
          boundaryGap: false,
          axisLabel: {
            formatter: function (value, index) {
              let date = new Date(value);
              return (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':' +
                (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '饮水量 (m³)'
          }
        ],
        series: [
          {
            name: this.useWaterData.serialNameYesterday,
            type: 'line',
            smooth: true,
            symbol: 'none',
            data: this.useWaterData.yesterday
          },
          {
            name: this.useWaterData.serialNameToday,
            type: 'line',
            smooth: true,
            symbol: 'none',
            data: this.useWaterData.today
          }
        ]
      }
    },
    //空气温度
    envTemplateChartOption () {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          backgroundColor: "rgba(33,47,71,0.8)",
          padding: [10, 16],
          textStyle: {
            color: "#A7C8ED",
            lineHeight: 28,
          },
          formatter: function(params) {
            console.log(params);
          },
          extraCssText: "width: 230px",
        },
        legend: {
          data: [this.envTemperatureData.serialNameYesterday, this.envTemperatureData.serialNameToday],
          right: 20
        },
        xAxis: {
          type: 'time',
          boundaryGap: false,
          axisLabel: {
            formatter: function (value, index) {
              let date = new Date(value);
              return (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':' +
                (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '空气温度 (℃)'
          }
        ],
        series: [
          {
            name: this.envTemperatureData.serialNameYesterday,
            type: 'line',
            smooth: true,
            symbol: 'none',
            data: this.envTemperatureData.yesterday
          },
          {
            name: this.envTemperatureData.serialNameToday,
            type: 'line',
            smooth: true,
            symbol: 'none',
            data: this.envTemperatureData.today
          }
        ]
      }
    },
    //进出水温度
    templateChartOption() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          backgroundColor: "rgba(33,47,71,0.8)",
          padding: [10, 16],
          textStyle: {
            color: "#A7C8ED",
            lineHeight: 28,
          },
          formatter: function(params) {
            console.log(params);
          },
          extraCssText: "width: 230px",
        },
        legend: {
          data: [this.temperatureData.serialNameYesterdayInfluent, this.temperatureData.serialNameTodayInfluent, this.temperatureData.serialNameYesterdayEffluent, this.temperatureData.serialNameTodayEffluent],
          right: 20
        },
        xAxis: {
          type: 'time',
          boundaryGap: false,
          axisLabel: {
            formatter: function (value, index) {
              let date = new Date(value);
              return (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':' +
                (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '进出水温度 (℃)'
          }
        ],
        series: [
          {
            name: this.temperatureData.serialNameYesterdayInfluent,
            type: 'line',
            smooth: true,
            symbol: 'none',
            data: this.temperatureData.yesterdayInfluent
          },
          {
            name: this.temperatureData.serialNameTodayInfluent,
            type: 'line',
            smooth: true,
            symbol: 'none',
            data: this.temperatureData.todayInfluent
          },
          {
            name: this.temperatureData.serialNameYesterdayEffluent,
            type: 'line',
            smooth: true,
            symbol: 'none',
            data: this.temperatureData.yesterdayEffluent
          },
          {
            name: this.temperatureData.serialNameTodayEffluent,
            type: 'line',
            smooth: true,
            symbol: 'none',
            data: this.temperatureData.todayEffluent
          },
        ]
      }
    },

  },
  methods: {
    /**
     * 搜索按钮
     *
     * @author cancan
     * @date 2022/03/05 14:48
     */
    reload() {
      this.getUseWaterData();
    },


    /**
     * 重置搜索
     *
     * @author cancan
     * @date 2022/03/05 14:48
     */
    reset() {
      this.where.recordId = this.data.recordId;
      this.where.oneDate = '';
      this.where.twoDate = '';
      this.$nextTick(() => {
        this.reload();
      });
    },



    getUseWaterData(){
      if (this.where.oneDate == null || this.where.oneDate == '') {
        this.where.oneDate = moment().subtract(1, 'days').format('YYYY-MM-DD');
      }
      if (this.where.twoDate == null || this.where.twoDate == '') {
        this.where.twoDate = moment().format('YYYY-MM-DD');
      }
      this.useWaterData.serialNameYesterday = this.where.oneDate + "饮水量m³";
      this.useWaterData.serialNameToday = this.where.twoDate + "饮水量m³";
      this.envTemperatureData.serialNameYesterday = this.where.oneDate + "空气温度℃";
      this.envTemperatureData.serialNameToday = this.where.twoDate + "空气温度℃";

      this.temperatureData.serialNameYesterdayInfluent = this.where.oneDate + "进水温度℃";
      this.temperatureData.serialNameTodayInfluent = this.where.twoDate + "进水温度℃";
      this.temperatureData.serialNameYesterdayEffluent = this.where.oneDate + "出水温度℃";
      this.temperatureData.serialNameTodayEffluent = this.where.twoDate + "出水温度℃";

      let yesterdayParams = {
        searchBeginTime : this.where.oneDate + " 00:00:00",
        searchEndTime : this.where.oneDate + " 23:59:59",
        recordId : this.data.recordId,
        sortBy : "asc",
        orderBy : "create_time"
      };

      let todayParams = {
        searchBeginTime : this.where.twoDate + " 00:00:00",
        searchEndTime : this.where.twoDate + " 23:59:59",
        recordId : this.data.recordId,
        sortBy : "asc",
        orderBy : "create_time"
      };
      let that = this;
      that.useWaterData.yesterday = [];
      that.useWaterData.today = [];
      that.envTemperatureData.yesterday = [];
      that.envTemperatureData.today = [];
      that.temperatureData.yesterdayInfluent = [];
      that.temperatureData.todayInfluent = [];
      that.temperatureData.yesterdayEffluent = [];
      that.temperatureData.todayEffluent = [];

      Promise.all([
        DeviceDrinkheatingDataApi.list(yesterdayParams),
        DeviceDrinkheatingDataApi.list(todayParams)
      ]).then(function (resArr){
        let yesterdayResultData = resArr[0];
        let todayResultData = resArr[1];
        if (yesterdayResultData && yesterdayResultData.length > 0) {
          yesterdayResultData.forEach(function(item) {
            let formatTime = that.where.twoDate + " " + moment(item.createTime).format('HH:mm:ss');
            that.useWaterData.yesterday.push([formatTime, ((item.cycleInfluentFlow - item.cycleEffluentFlow) * 0.01).toFixed(2)]);
            that.envTemperatureData.yesterday.push([formatTime, item.envTemperature]);
            that.temperatureData.yesterdayInfluent.push([formatTime, item.influentTemperature]);
            that.temperatureData.yesterdayEffluent.push([formatTime, item.effluentTemperature]);

          });
        } else {
          let yesTemp1 = that.where.twoDate + " 00:00:00";
          let yesTemp2 = that.where.twoDate + " 01:00:00";
          let yesTemp3 = that.where.twoDate + " 03:00:00";
          let yesTemp4 = that.where.twoDate + " 08:00:00";
          let yesTemp5 = that.where.twoDate + " 14:00:00";
          let yesTemp6 = that.where.twoDate + " 21:00:00";
          let yesTemp7 = that.where.twoDate + " 23:59:59";
          that.useWaterData.yesterday.push([yesTemp1, 0]);
          that.useWaterData.yesterday.push([yesTemp2, 0]);
          that.useWaterData.yesterday.push([yesTemp3, 0]);
          that.useWaterData.yesterday.push([yesTemp4, 0]);
          that.useWaterData.yesterday.push([yesTemp5, 0]);
          that.useWaterData.yesterday.push([yesTemp6, 0]);
          that.useWaterData.yesterday.push([yesTemp7, 0]);

          that.envTemperatureData.yesterday.push([yesTemp1, 0]);
          that.envTemperatureData.yesterday.push([yesTemp2, 0]);
          that.envTemperatureData.yesterday.push([yesTemp3, 0]);
          that.envTemperatureData.yesterday.push([yesTemp4, 0]);
          that.envTemperatureData.yesterday.push([yesTemp5, 0]);
          that.envTemperatureData.yesterday.push([yesTemp6, 0]);
          that.envTemperatureData.yesterday.push([yesTemp7, 0]);

          that.temperatureData.yesterdayInfluent.push([yesTemp1, 0]);
          that.temperatureData.yesterdayInfluent.push([yesTemp2, 0]);
          that.temperatureData.yesterdayInfluent.push([yesTemp3, 0]);
          that.temperatureData.yesterdayInfluent.push([yesTemp4, 0]);
          that.temperatureData.yesterdayInfluent.push([yesTemp5, 0]);
          that.temperatureData.yesterdayInfluent.push([yesTemp6, 0]);
          that.temperatureData.yesterdayInfluent.push([yesTemp7, 0]);

          that.temperatureData.yesterdayEffluent.push([yesTemp1, 0]);
          that.temperatureData.yesterdayEffluent.push([yesTemp2, 0]);
          that.temperatureData.yesterdayEffluent.push([yesTemp3, 0]);
          that.temperatureData.yesterdayEffluent.push([yesTemp4, 0]);
          that.temperatureData.yesterdayEffluent.push([yesTemp5, 0]);
          that.temperatureData.yesterdayEffluent.push([yesTemp6, 0]);
          that.temperatureData.yesterdayEffluent.push([yesTemp7, 0]);
        }


        if (todayResultData && todayResultData.length > 0) {
          todayResultData.forEach(function(item) {
            that.useWaterData.today.push([item.createTime, ((item.cycleInfluentFlow - item.cycleEffluentFlow) * 0.01).toFixed(2)]);
            that.envTemperatureData.today.push([item.createTime, item.envTemperature]);
            that.temperatureData.todayInfluent.push([item.createTime, item.influentTemperature]);
            that.temperatureData.todayEffluent.push([item.createTime, item.effluentTemperature]);
          });
        } else {
          let todayTemp1 = that.where.twoDate + " 00:00:00";
          let todayTemp2 = that.where.twoDate + " 01:00:00";
          let todayTemp3 = that.where.twoDate + " 03:00:00";
          let todayTemp4 = that.where.twoDate + " 08:00:00";
          let todayTemp5 = that.where.twoDate + " 14:00:00";
          let todayTemp6 = that.where.twoDate + " 21:00:00";
          let todayTemp7 = that.where.twoDate + " 23:59:59";

          that.useWaterData.today.push([todayTemp1, 0]);
          that.useWaterData.today.push([todayTemp2, 0]);
          that.useWaterData.today.push([todayTemp3, 0]);
          that.useWaterData.today.push([todayTemp4, 0]);
          that.useWaterData.today.push([todayTemp5, 0]);
          that.useWaterData.today.push([todayTemp6, 0]);
          that.useWaterData.today.push([todayTemp7, 0]);

          that.envTemperatureData.today.push([todayTemp1, 0]);
          that.envTemperatureData.today.push([todayTemp2, 0]);
          that.envTemperatureData.today.push([todayTemp3, 0]);
          that.envTemperatureData.today.push([todayTemp4, 0]);
          that.envTemperatureData.today.push([todayTemp5, 0]);
          that.envTemperatureData.today.push([todayTemp6, 0]);
          that.envTemperatureData.today.push([todayTemp7, 0]);

          that.temperatureData.todayInfluent.push([todayTemp1, 0]);
          that.temperatureData.todayInfluent.push([todayTemp2, 0]);
          that.temperatureData.todayInfluent.push([todayTemp3, 0]);
          that.temperatureData.todayInfluent.push([todayTemp4, 0]);
          that.temperatureData.todayInfluent.push([todayTemp5, 0]);
          that.temperatureData.todayInfluent.push([todayTemp6, 0]);
          that.temperatureData.todayInfluent.push([todayTemp7, 0]);

          that.temperatureData.todayEffluent.push([todayTemp1, 0]);
          that.temperatureData.todayEffluent.push([todayTemp2, 0]);
          that.temperatureData.todayEffluent.push([todayTemp3, 0]);
          that.temperatureData.todayEffluent.push([todayTemp4, 0]);
          that.temperatureData.todayEffluent.push([todayTemp5, 0]);
          that.temperatureData.todayEffluent.push([todayTemp6, 0]);
          that.temperatureData.todayEffluent.push([todayTemp7, 0]);
        }
      });
    },
    activated() {
      ['useWaterChart', 'envTemplateChart', 'templateChart'].forEach((name) => {
        this.$refs[name].resize();
      });
    }
  }
};
</script>
